<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator open-type="navigateBack" :delta="1" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">编辑员工</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="form-card">
				<form class="employee-form" @submit.prevent="updateEmployee">
					<input type="hidden" class="hidden-input" v-model="editingEmployee.id">

					<!-- 基本信息 -->
					<view class="form-section">
						<view class="form-row">
							<view class="form-field">
								<text class="field-label">姓名</text>
								<text class="required-star">*</text>
								<input type="text" class="text-input" placeholder="请输入姓名" v-model="editingEmployee.name"
									required>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">性别</text>
								<picker class="picker-field" mode="selector" :range="genders" v-model="selectedGender"
									@change="onGenderChange">
									<view class="picker-display">
										{{ selectedGender === -1 ? '请选择' : genders[selectedGender] }}
									</view>
								</picker>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">手机号码</text>
								<text class="required-star">*</text>
								<input type="tel" class="text-input" placeholder="请输入手机号码"
									v-model="editingEmployee.phone" required>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">电子邮箱</text>
								<input type="email" class="text-input" placeholder="请输入电子邮箱"
									v-model="editingEmployee.email">
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">员工类型</text>
								<text class="required-star">*</text>
								<picker class="picker-field" mode="selector" :range="employeeTypes" range-key="label"
									v-model="selectedEmployeeType" @change="onEmployeeTypeChange">
									<view class="picker-display">
										{{ selectedEmployeeType === -1 ? '请选择' : employeeTypes[selectedEmployeeType].label }}
									</view>
								</picker>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">工号</text>
								<text class="required-star">*</text>
								<input type="text" class="text-input" placeholder="请输入工号"
									v-model="editingEmployee.number" required>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">部门</text>
								<text class="required-star">*</text>
								<picker class="picker-field" mode="selector" :range="departments" range-key="label"
									v-model="selectedDepartment" @change="onDepartmentChange">
									<view class="picker-display">
										{{ selectedDepartment === -1 ? '请选择' : departments[selectedDepartment].label }}
									</view>
								</picker>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">职位</text>
								<text class="required-star">*</text>
								<input type="text" class="text-input" placeholder="请输入职位"
									v-model="editingEmployee.position" required>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">入职日期</text>
								<text class="required-star">*</text>
								<picker mode="date" class="date-picker" start="2010-01-01" :end="currentDate"
									:value="editingEmployee.hireDate" @change="onHireDateChange">
									<view class="picker-display">
										{{ editingEmployee.hireDate || '请选择日期' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">试用期(月)</text>
								<input type="number" class="text-input" placeholder="请输入试用期"
									v-model="editingEmployee.probation">
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">联系地址</text>
								<input type="text" class="text-input" placeholder="请输入联系地址"
									v-model="editingEmployee.address">
							</view>
						</view>

						<view class="form-row">
							<view class="form-field">
								<text class="field-label">备注</text>
								<textarea class="textarea-field" placeholder="请输入备注信息" v-model="editingEmployee.remark"
									rows="3"></textarea>
							</view>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="form-actions">
						<navigator url="/pageNew/pages/employee/index" class="cancel-button">
							取消
						</navigator>
						<view type="submit" class="submit-button">
							保存
						</view>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editingEmployee: {
					id: '',
					name: '',
					gender: '',
					phone: '',
					email: '',
					type: '',
					number: '',
					department: '',
					position: '',
					hireDate: '',
					probation: 3,
					address: '',
					remark: '',
					salary: 0
				},
				genders: ['男', '女', '其他'],
				selectedGender: -1,
				employeeTypes: [{
						value: 'fulltime',
						label: '全职'
					},
					{
						value: 'parttime',
						label: '兼职'
					},
					{
						value: 'intern',
						label: '实习生'
					}
				],
				selectedEmployeeType: -1,
				departments: [{
						value: 'hr',
						label: '人力资源部'
					},
					{
						value: 'finance',
						label: '财务部'
					},
					{
						value: 'tech',
						label: '技术部'
					},
					{
						value: 'sales',
						label: '销售部'
					},
					{
						value: 'operations',
						label: '运营部'
					}
				],
				selectedDepartment: -1,
				currentDate: this.formatDate(new Date())
			};
		},
		onLoad(options) {
			console.log('编辑员工页面加载完成，员工ID:', options.id);
			this.editingEmployee.id = options.id;
			this.loadEmployeeData(options.id);
		},
		methods: {
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			loadEmployeeData(id) {
				const employeeData = {
					id: id,
					name: '张三',
					gender: '男',
					phone: '13800138000',
					email: 'zhangsan@example.com',
					type: 'fulltime',
					number: 'EMP001',
					department: '技术部',
					position: '前端开发工程师',
					hireDate: '2024-01-15',
					probation: 3,
					address: '北京市海淀区中关村大街1号',
					remark: '技术骨干，负责前端开发工作',
					salary: 15000
				};

				this.editingEmployee = employeeData;
				this.selectedGender = this.genders.indexOf(employeeData.gender);

				for (let i = 0; i < this.employeeTypes.length; i++) {
					if (this.employeeTypes[i].value === employeeData.type) {
						this.selectedEmployeeType = i;
						break;
					}
				}

				for (let i = 0; i < this.departments.length; i++) {
					if (this.departments[i].label === employeeData.department) {
						this.selectedDepartment = i;
						break;
					}
				}
			},

			onGenderChange(e) {
				this.selectedGender = e.detail.value;
				this.editingEmployee.gender = this.genders[this.selectedGender];
			},

			onEmployeeTypeChange(e) {
				this.selectedEmployeeType = e.detail.value;
				this.editingEmployee.type = this.employeeTypes[this.selectedEmployeeType].value;
			},

			onDepartmentChange(e) {
				this.selectedDepartment = e.detail.value;
				this.editingEmployee.department = this.departments[this.selectedDepartment].label;
			},

			onHireDateChange(e) {
				this.editingEmployee.hireDate = e.detail.value;
			},

			updateEmployee() {
				if (!this.editingEmployee.name || !this.editingEmployee.phone || !this.editingEmployee.number ||
					!this.editingEmployee.position || !this.editingEmployee.hireDate || this.selectedEmployeeType === -1 ||
					this.selectedDepartment === -1) {
					uni.showToast({
						title: '请填写必填字段',
						icon: 'none'
					});
					return;
				}

				console.log('更新员工:', this.editingEmployee);

				uni.showToast({
					title: '员工更新成功',
					icon: 'success'
				});

				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	};
</script>

<style>
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
	}

	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.content-container {
		margin: 0 auto;
		padding: 16px;
	}

	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.employee-form {
		width: 100%;
	}

	.hidden-input {
		display: none;
	}

	.form-section {
		margin-bottom: 24px;
	}

	.form-row {
		margin-bottom: 16px;
	}

	.form-field {
		display: flex;
		flex-direction: column;
	}

	.field-label {
		font-size: 14px;
		color: #6b7280;
		margin-bottom: 4px;
		display: flex;
		align-items: center;
	}

	.required-star {
		color: #f44336;
		margin-left: 2px;
	}

	.text-input {
		width: 100%;
		height: 100%;
		margin: 8px;
		border-bottom: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
	}

	.picker-field {
		width: 100%;
	}

	.picker-display {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
	}

	.date-picker {
		width: 100%;
	}

	.textarea-field {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		min-height: 80px;
		resize: vertical;
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		padding-top: 16px;
		border-top: 1px solid #e5e7eb;
	}

	.cancel-button {
		padding: 8px 16px;
		background-color: #e5e7eb;
		color: #374151;
		border-radius: 6px;
		font-size: 14px;
		text-decoration: none;
	}

	.submit-button {
		padding: 8px 16px;
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		font-size: 14px;
		border: none;
	}
</style>